<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>待评审项目列表</title>
    @include('common-css')
    <style>

        .input_box {
            width: 100%;
            height: 40px;
            margin-top: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .input_label {
            width: 120px;
            box-sizing: border-box;
        }

        .project-table {
            margin-top: 15px;
        }

        .status-tag {
            color: #1890ff;
            border: 1px solid #91d5ff;
            border-radius: 3px;
            background: #e6f7ff;
            font-size: 12px;
            padding: 2px 3px;
        }

        .ant-table-tbody > tr > td, .ant-table-thead > tr > th {
            vertical-align: middle;
            line-height: 25px;
        }

        .search_box {
            width: 1000px;
        }

        .search_box input {
            width: 300px;
        }

        .search_box button {
            margin-left: 20px;
        }

        .search_box .ant-select {
            margin-left: 20px;
        }

        .expert-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            border-radius: 4px 4px 0 0;
        }

        .expert-table > tr > th {
            vertical-align: middle;
            line-height: 25px;
            padding: 16px;
            background: #fafafa;
            -webkit-transition: background .3s ease;
            transition: background .3s ease;
            text-align: center;
            color: rgba(0, 0, 0, .85);
            font-weight: 500;
            border-bottom: 1px solid #e8e8e8;
        }

        .expert-table > tr > td {
            padding: 8px;
            line-height: 25px;
            vertical-align: middle;
            text-align: center;
        }

        .inner-table {
            width: 100%;
            border-collapse: collapse;
        }

        .inner-table th {
            font-weight: bold;
            color: #888;
            padding: 6px 3px;
            text-align: center;
            border: 1px solid #eee;
            vertical-align: middle;
            font-size: 12px;
        }

        .inner-table td {
            border: 1px solid #eee;
            padding: 6px 3px;
            text-align: center;
            vertical-align: middle;
            font-size: 14px;
        }

        .delete-btn-a {
            color: #f5222d
        }

    </style>
</head>
<body>

<div id="app"></div>

<script id="appTemplate" type="x-template">
    <a-locale-provider :locale="antdLocale">
        <div class="container">

            @include('review.header-tpl')

            <main>
                <div class="common_container">

                    @include('review.aside-tpl')

                    <div class="common_content review_common_content">
                        <div style="margin-top: 20px; margin-bottom: 20px">
                            <template v-if="unfinishedProjectCount > 0">
                                您还有 <span style="color: red;">@{{ unfinishedProjectCount }}</span> 个项目尚未评审完成，
                            </template>
                            <template v-else>
                                您已评审完所有项目，
                            </template>
                            <template v-if="remainingDaysForReview > 0">
                                距离评审结束还有 <span style="color: red;">@{{ remainingDaysForReview }}</span> 天
                            </template>
                            <template v-else>
                                评审已结束
                            </template>
                        </div>

                        <a-table class="project-table"
                                 rowKey="id"
                                 size="small"
                                 :columns="projectTableColumns"
                                 :dataSource="filteredProjects"
                                 :loading="loadingPageData"
                                 :pagination="{pageSize: 10000, hideOnSinglePage: true, position: 'both', showTotal: total => `共 ${total} 项`}">
                            <span slot="score_status" :style="scoreStatusStyles[record.score_status.score_status_id]"
                                  size="large" slot-scope="text, record">
                                @{{ record.score_status.score_status_phrase }}
                            </span>
                            <span slot="score" size="large" slot-scope="text, record">
                                @{{ record.score !== null ? record.score : '-' }}
                            </span>
                            <span slot="operations" size="large" slot-scope="text, record">
                                <a :href="'/home/view-form?id=' + record.project_id" target="_blank">查看申报书</a>
                                <a-divider type="vertical"/>
                                <a :href="'/home/view-attachments?project_id=' + record.project_id"
                                   target="_blank">查看附件</a>
                                <template v-if="true || atPhaseExpertReview && record.score_status.score_status_id !== 3">
                                    <a-divider type="vertical"/>
                                    <a :href="'/review/score?project_id=' + record.project_id" target="_blank">打分</a>
                                </template>
                                <template v-if="atPhaseExpertReview && record.score_status.score_status_id === 2">
                                    <a-divider type="vertical"/>
                                    <a-popconfirm title="提交后不能修改，确认提交？" okText="是" cancelText="否"
                                                  @confirm="submitProjectScore(record)">
                                        <a>提交</a>
                                    </a-popconfirm>
                                </template>
                            </span>
                        </a-table>
                    </div>
                </div>
            </main>

            @include('review.dialog-reviewer-welcome-tpl')

        </div>
    </a-locale-provider>
</script>

@include('common-js')
@include('review.header-js')
@include('review.aside-js')
@include('review.dialog-reviewer-welcome-js')

<script>
    var queryParams = parseUrl(location.href).params;

    var projectTableColumns = [
        {
            width: 60,
            title: '序号',
            dataIndex: 'num'
        },
        {
            width: 150,
            title: '项目名称',
            dataIndex: 'project_name',
            scopedSlots: {
                customRender: 'project_name'
            }
        },
            @if ($award_id == '1')
        {
            width: 80,
            title: '专业类别',
            dataIndex: 'prof_category',
            scopedSlots: {
                customRender: 'prof_category'
            }
        },
            @endif
        {
            width: 150,
            title: '申报者',
            dataIndex: 'applicant',
        },
        {
            width: 70,
            title: '状态',
            dataIndex: 'score_status',
            scopedSlots: {
                customRender: 'score_status'
            }
        },
        {
            width: 60,
            title: '分数',
            dataIndex: 'score',
            scopedSlots: {
                customRender: 'score'
            }
        },
        {
            width: 200,
            title: '操作',
            key: 'operations',
            scopedSlots: {
                customRender: 'operations'
            }
        }
    ];
</script>
<script>
    var app = new Vue({
        el: '#app',
        template: '#appTemplate',
        data: {
            projectTableColumns,
            projectPageData: [],
            loadingPageData: false,

            ifAttendReview: false,
            awardId: null,
            largeGroupId: null,
            atPhaseExpertReview: false,
            reviewBeginAt: null,
            reviewEndAt: null,
            remainingDaysForReview: 0,

            scoreStatusStyles: {1: "color: orange;", 2: "color: orange;", 3: "color: dodgerblue;"},

            queryParams,

            reviewerName: '{{ Auth::user()->name  }}',
            hasShownWelcomeDialog: {{ Auth::user()->hasShownReviewerWelcomeDialog() ? 'true' : 'false'  }},

            asideSelectedKeys: [queryParams.aside_key],
            antdLocale: antd.locales.zh_CN,
            ...ReviewHeader.data,
            ...Workflow.data,
            ...DialogReviewerWelcome.data,
        },
        computed: {
            filteredProjects() {
                this.projectPageData.forEach((project, index) => project.num = index + 1);
                return this.projectPageData
            },
            unfinishedProjectCount() {
                return this.projectPageData.reduce((result, item) => result + Number(item.score_status.score_status_id !== 3), 0)
            },
            ...DialogReviewerWelcome.computed,
        },
        mounted() {
            this.reloadPageData();
            this.reloadWorkflowPhases();
            if (!this.hasShownWelcomeDialog) {
                this.showReviewerWelcomeDialog()
            }
        },
        methods: {
            submitProjectScore($reviewerScoreProject) {
                axios.post('/api/review/submit-project-score', {
                    project_id: $reviewerScoreProject.project_id,
                }).then(response => {
                    if (response.data.ok) {
                        success('提交成功');
                        this.reloadPageData()
                    } else {
                        error('提交失败: ' + response.data.msg)
                    }
                })
            },
            reloadPageData() {
                this.loadingPageData = true;
                axios.get('/api/review/get-projects').then(response => {
                        if (response.data.ok) {
                            let data = response.data.data
                            this.ifAttendReview = data.if_attend_review
                            this.awardId = data.award_id
                            this.largeGroupId = data.large_group_id
                            this.atPhaseExpertReview = data.at_phase_expert_review
                            this.reviewBeginAt = data.review_begin_at
                            this.reviewEndAt = data.review_end_at
                            this.remainingDaysForReview = data.remaining_days_for_review
                            this.projectPageData = data.projects
                        } else {
                            error("加载页面数据失败: " + response.data.msg)
                        }
                        this.loadingPageData = false
                    }
                )
            },

            ...ReviewHeader.methods,
            ...Workflow.methods,
            ...DialogReviewerWelcome.methods,
        }
    })
</script>
</body>
</html>